---
title: Sign-Up Page Examples
---

# Custom Sign-Up Page Examples

This page provides examples of how to create custom sign-up pages for your application using Stack Auth components and functions.

## Custom page with `SignUp` component

```tsx
'use client';
import { SignUp } from "@stackframe/stack";

export default function DefaultSignUp() {
  // optionally redirect to some other page if the user is already signed in
  // const user = useUser();
  // if (user) { redirect to some other page }
  return <SignUp fullPage />;
}
```

You can also use `useUser` at the beginning of the sign-up page to check whether the user is already signed in and redirect them to another page if they are.

## Other useful components

`CredentialSignUp`: A component that renders a complete form for signing up with email and password. It handles validation, error states, and submission automatically.

`OAuthGroup`: A component that displays a list of available OAuth provider sign-up buttons. The available provider list is automatically fetched from the server based on your project configuration.

`OAuthButton`: A component that renders a single OAuth sign-up button for a specific provider. Use this when you only want to offer specific OAuth providers.

## Custom OAuth Sign Up

OAuth sign-in and sign-up share the same function. Check out the [Sign In example](/customization/page-examples/sign-in#custom-oauth-sign-in) for more information.

## Custom Credential Sign Up

```tsx
'use client';

import { useStackApp } from "@stackframe/stack";
import { useState } from "react";

export default function CustomCredentialSignUp() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const app = useStackApp();

  const onSubmit = async () => {
    if (!password) {
      setError('Please enter your password');
      return;
    }
    // This will redirect to app.urls.afterSignUp if successful.
    // You can customize the redirect URL in the StackServerApp constructor.
    const result = await app.signUpWithCredential({ email, password });
    // It's better to handle each error code separately, but for simplicity,
    // we'll just display the error message directly here.
    if (result.status === 'error') {
      setError(result.error.message);
    }
  };
  
  return (
    <form onSubmit={(e) => { e.preventDefault(); onSubmit(); } }>
      {error}
      <input type='email' placeholder="email@example.com" value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type='password' placeholder="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type='submit'>Sign Up</button>
    </form>
  );
}
```

## Custom Magic Link Sign Up

Magic link sign-in and sign-up shares the same function. Check out the [Sign In example](/customization/page-examples/signin#custom-magic-link-sign-in) for more information.
